<template>
	<view>
		<view v-if='isShow'>
		<view class="mine">
			<image :src="barUrl+ser.avatarurl" mode="" class="imgag"></image>
			<view class="">
				<view class="">{{ser.nickname}}</view>
				<view class="minee">完善资料让小U更懂你</view>
			</view>
			<view class="">
				<u-tag color="#ff6347" borderColor='#FF9999' text="每日签到" size="mini" icon="red-packet-fill"
					bgColor='#FF9999'></u-tag>
			</view>

		</view>
		<view class="">
			<ul class='_code'>
				<li v-for="item in list" :key="item.id">
					<view class="">{{item.num}}</view>
					<view class="">{{item.title}}</view>
				</li>
			</ul>
		</view>
		<view class="abc">
			<view class="ding">
				<view class="dings">
					<view class="">我的订单</view>
					<view>全部订单></view>
				</view>
				<view class="">
					<ul class='ul'>
						<li v-for="item in list1" :key="item.id">
							<view class="">
								<image class='imgg' :src="item.img" mode=""></image>
							</view>
							<view class="">{{item.name}}</view>
						</li>
					</ul>
				</view>
			</view>
		</view>
		
		<view class="abb"></view>
		<view class="">
			<u-cell-group>
				<u-cell icon='map' color='#ff6347' size="large" title="地址管理" isLink></u-cell>
				<u-cell icon='red-packet' color='#ff6347' size="large" title="我的钱包" isLink></u-cell>
				<u-cell icon='grid' color='#ff6347' size="large" title="我的二维码" isLink></u-cell>
				<u-cell icon='account-fill' color='#ff6347' size="large" title="我的小伙伴" isLink></u-cell>
				<u-cell icon='rmb-circle' color='#ff6347' size="large" title="0元试用" isLink></u-cell>
			</u-cell-group>
		</view>
    
	
	    </view>
	   
	   <view class="" v-else>
		   
		   	<view class="login_title">
		   				欢迎登录小U商城
		   			</view>
		<!-- 根据平台去判断按钮提示，微信小程序一键登录，H5平台显示手机号验证-->
		<!-- #ifdef MP-WEIXIN -->
		<view class="">
			<button class='login_but' open-type='getPhoneNumber' @getphonenumber="weixin" hover-class="touchOpacity">微信一键登录</button>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="" >
			<u-button type="primary" class='btn' @click="toLogin">手机验证码注册登录</u-button>
		</view>
		<!-- #endif -->
		 </view>
	</view>
</template>

<script>
	import checkLogin from '@/common/checkLogin.js'
	import {wxLogin} from '@/request/app.js'
	export default {
		data() {
			return {
				ser:[],
				barUrl:this.$imgUrl,
				list: [{
						id: 1,
						num: 12,
						title: '我的收藏'
					},
					{
						id: 2,
						num: 12,
						title: '浏览记录'
					},
					{
						id: 3,
						num: 0,
						title: '我的红包'
					},
					{
						id: 4,
						num: 12,
						title: '优惠价'
					}
				],
				list1: [{
						id: 1,
						img: require('../../static/img/1.png'),
						name: '待付款'
					},
					{
						id: 2,
						img: require('../../static/img/2.png'),
						name: '代发货'
					},
					{
						id: 3,
						img: require('../../static/img/3.png'),
						name: '待确认'
					},
					{
						id: 4,
						img: require('../../static/img/4.png'),
						name: '售后/退款'
					},

				],
				isShow:''
			}
		},
		onShow() {
			// 登录状态检测
			checkLogin()
			this.isShow=checkLogin()
			this.ser=uni.getStorageSync("userinfo")
		},
		onLoad() {
			// 登录状态检测
			this.isShow=checkLogin()
			this.ser=uni.getStorageSync("userinfo")
		},
		methods: {
			toLogin() {
                uni.navigateTo({
                	url:'../Login/Login'
                })
			},
			// 微信小程序
			weixin(e){
				console.log(e,"ee");
				const {iv,encryptedData}=e.detail
				if(e.detail.errMsg =="getPhoneNumber:fail user deny"){
					uni.showToast({
						title:'拒绝授权',
						icon:'error'
					})
				}else{
					// 调用微信元素的登录方法
					// 登录需要三个条件 code 临时凭证 iv向量  encryptedData加密数据
					wx.login({
						success(res){
							// console.log(res,"信息");
							// 调用接口
							wxLogin({
								iv,
								encryptedData,
								code:res.code
							})
							.then(res=>{
								console.log(res,"登录成功");
								if(res.data.code==200){
									uni.setStorageSync("userinfo",res.data.list)
									uni.switchTab({
										url:'../home/home'
									})
									checkLogin()
									
								}
								
								
								
							})
						}
					})
				}
			}
		}

	}
</script>

<style lang="scss">
	.login_but {
			margin: 64rpx 0 40rpx 0;
			width: 670rpx;
			line-height: 98rpx;
			// text-align: center;
			margin: auto;
			background-color: #FF6040;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	.imgag{
		border-radius: 50%;
	}
	.btn{
		width: 80%;
		
	}
	.login_title {
		text-align: center;
			font-size: 48rpx;
			color: #666666;
			margin: 548rpx 0 48rpx 0;
		}

	.abb {
		height: 60px;
		background-color: #eee;
	}

	.abc {
		height: 80px;
		background-color: tomato;
		position: relative;
	}

	.ding {
		width: 90%;
		background-color: white;
		border-radius: 10px;
		position: absolute;
		left: 5%;
		z-index: 1;
	}

	.dings {
		display: flex;
		justify-content: space-between;
		padding: 5px;
		box-sizing: border-box;
		font-size: 20px;
		font-weight: bold;
		color: #000;
	}

	.dings view:nth-child(2) {
		color: tomato;
		font-size: 16px;
	}

	.ul {
		display: flex;
		justify-content: space-around;
	}

	.ul li {
		text-align: center;
	}

	.imgg {
		width: 50px;
		height: 50px;
	}

	._code {
		height: 100px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: tomato;
		color: #eee;
	}

	._code li {
		text-align: center;
	}

	.mine {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: tomato;
	}

	.mine image {
		width: 80px;
		height: 80px;
	}

	.mine view:nth-child(2) {
		color: #eee;
	}

	.mine view:nth-child(2) .minee {
		border: 1px solid white;
		font-size: 14px;
		width: 100px;
		text-align: center;
		padding: 5px;
		box-sizing: border-box;
	}
</style>
